<template>
    <div class = "Administrator">
          <el-container>
            <el-container>
            <el-main>
            <div class = "but" style="float:right">
                 <el-button @click = "newly">新增</el-button>
            </div>
        <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
            align="center"
            prop="id"
            label="ID">
            </el-table-column>
            <el-table-column
            align="center"
            prop="account"
            label="账号">
            </el-table-column>
            <el-table-column
            align="center"
            prop="name" 
            label="姓名">
            </el-table-column>
            <el-table-column
            align="center"
            label="权限">
            <template slot-scope="scope" >
                <el-popover trigger="hover" placement="top">
                <p>{{ scope.row.menus }}</p>
                <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">权限</el-tag>
                </div>
                </el-popover>
            </template>
            </el-table-column>
            <el-table-column
            align="center"
            prop="createdAt"
            label="创建日期">
            </el-table-column>
        </el-table>
            </el-main>
            </el-container>
          </el-container>
    </div>
</template>
<script>
import transitionTime from '../../transitionTime.js'
import { getMenuName } from '../../utils/feizns'

export default {
    data(){
        return{
            tableData: [],
        }
    },
    created(){
        this.List()
    },
    methods:{
        List(){
            this.$api.Basetoaddordelete.gainAdministratorList().then(res => {
                this.tableData = res.data.rows
                this.tableData.forEach(item => {
                    item.createdAt = transitionTime(item.createdAt);
                    item.menus = item.menus.map(m => getMenuName(m)).filter(element => element !== undefined);
                })
               
            }).catch(err => {
                console.log(err)
            })
        },
      handleDelete(index, row) {
        console.log(index, row);
      },
      newly(){
          this.$router.push('Administratoraddcompile')
      }
    }
}
</script>
<style scoped>

</style>
